<template>
  <view>
    <u-sticky>
      <!-- 只能有一个根元素 -->
      <view class="sticky">
        <view class="u-p-10">
          <u-search placeholder="搜索名称" v-model="listQuery.keyword" @change="handleSearch" @search="handleSearch"></u-search>
        </view>
      </view>
    </u-sticky>
    <mescroll-body ref="mescrollRef" @down="downCallback" :bottombar="false" :down="downOption" :sticky="false" @up="upCallback" :up="upOption" @init="mescrollInit">
      <view class="box-view" v-for="(item,index) in list" :key="index">
        <view class="content">
          <view class="title u-line-2">
            <text>{{ item.name }}</text>
          </view>
          <view class="bottom">
            <view class="u-flex">
              <text>里程：</text>
              <text>{{ item.id }}</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
    <!-- #ifdef H5 -->
    <view style="height: 100px;"></view>
    <!-- #endif -->
  </view>
</template>

<script>
  import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        mescroll: null,
        downOption: {
          use: true,
          auto: true
        },
        upOption: {
          page: {
            num: 0,
            size: 20,
            time: null
          },
          empty: {
            use: true,
            icon: null,
            tip: "暂无数据",
            fixed: false,
            top: "560rpx",
          },
          textNoMore: '没有更多数据',
          toTop: {
            warpId: null,
            src: null,
            html: null,
            offset: 1000,
            warpClass: "mescroll-totop",
            showClass: "mescroll-fade-in",
            hideClass: "mescroll-fade-out",
            duration: 300,
            supportTap: false,
            btnClick: null
          }
        },
        listQuery: {
          keyword: '',
          page: 1,
          pageSize: 20
        },
        list: []
      }
    },
    onShow() {
      // #ifdef APP-PLUS
      plus.screen.lockOrientation('portrait-primary')
      // #endif
    },
    methods: {
      upCallback(options) {
        this.listQuery.page = options.num
        this.listQuery.pageSize = options.size
        this.fetchData()
      },
      // 下拉刷新的回调 (mixin默认resetUpScroll)
      downCallback() {
        this.listQuery.page = 1
        if (this.mescroll.optUp.use) {
          this.mescroll.resetUpScroll()
        } else {
          setTimeout(() => {
            this.mescroll.endSuccess()
          }, 500)
        }
      },
      mescrollInit(mescroll) {
        this.mescroll = mescroll
      },
      fetchData() {
        let query = {
          ...this.listQuery,
        }
        // #ifdef H5
        for (let i = 0; i < this.listQuery.pageSize; i++) {
          this.list.push({ name: this.$u.guid(), id: i + 10 })
        }
        this.mescroll.endSuccess(this.listQuery.pageSize, true, new Date())
        // console.log(this.mescroll)
        return
        // #endif

      },
      handleSearch() {
        this.mescroll.resetUpScroll()
      }
    }
  }
</script>

<style lang="scss">
  .sticky {
    background-color: #fff;
  }

  .box-view {
    border: 1px solid #EEE;
    background-color: #FFF;
    margin: 10upx;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 15upx;
    box-shadow: 5px 5px 3px #EEE;
    min-height: 200upx;
    display: flex;

    .content {
      flex: 1;
      height: 200upx;
      border: 0px solid #EEE;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title {
        color: #484848;
        font-size: 36upx;
        font-weight: 100;
      }

      .bottom {
        display: flex;
        font-size: 22upx;
        color: #808080;
      }

      .u-flex {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10upx;
      }


    }

    .face {
      width: 300upx;
      height: 200upx;
      padding: 10upx;
      border-radius: 15upx;
      box-sizing: border-box;
      overflow: hidden;
      border: 0px solid #096;

      .banner {
        width: 280upx;
        height: 180upx;
        border-radius: 10upx;
      }
    }
  }
</style>